<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加图书</title>
    <script src="./js/jquery-2.1.0.js"></script>
    <style>
        body {
            background: url("./img/bj4.png") no-repeat;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            margin: 0;
            padding: 20px;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table, th, td {
            border: 1px solid #ccc;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<h2>图书添加</h2>
<table id="Booktable">
    <thead>
    <tr>
        <th>书名</th>
        <th>价格</th>
        <th>出版社</th>
        <th>作者</th>
        <th>数量</th>
        <th>功能</th>
    </tr>
    </thead>
    <tbody id="bookList">
    <!--  由后端传来数据  -->
    </tbody>
</table>
<button type="button" onclick="btn()">返回</button>

<script>
    <!--添加-->
    function add(e) {
        //TO DO 这里有问题，有空解决....
        var row = $(e).closest("tr");
        console.log(row)
        console.log(row.find("td:eq(0)").val())
        console.log(row.find("td:eq(0)"))
        //获取这一行第一列和第二列的值
        var bname = row.find("td:eq(0)").val();
        var price = row.find("td:eq(1)").val();
        var press = row.find("td:eq(2)").val();
        var author = row.find("td:eq(3)").val();
        var number = row.find("td:eq(4)").val();
        console.log(bname)
        $.ajax({
            type: "GET",
            url: "/api/book/addBook",
            data: {
                "bname": bname,
                "price": price,
                "press": press,
                "author": author,
                "number": number
            },
            dataType: "JSON",
            success: function (bookresult) {
                console.log(bookresult)
                if (bookresult.code == 20000) {
                    alert(bookresult.msg);
                    // 刷新页面
                    location.reload();
                } else {
                    alert(bookresult.msg);
                }
            }
        });
    }

    <!--页面加载事件 -->
    $(function () {
        //获取图书列表
        $.ajax({
            type: "GET",
            url: "api/book/bookList",
            data: {},
            dataType: "JSON",
            success: function (bookresult) {
                console.log(bookresult);
                var bookList = bookresult.data;
                if (bookresult.code == 20000) {
                    var tbody = document.getElementById("bookList");
                    bookList.forEach(function (books) {
                        var row = document.createElement("tr");
                        row.innerHTML = `
                            <td>${books.bname}</td>
                            <td>${books.price}</td>
                            <td>${books.press}</td>
                            <td>${books.author}</td>
                            <td>${books.number}</td>
                            <td>收藏</td>
                    `;
                        tbody.appendChild(row);
                    })
                    //添加输入框
                    var row2 = document.createElement("tr");
                    row2.innerHTML = `
                           <td><input type="text" id="bname" name="bname" placeholder="书名"></td>
                           <td><input type="number" id="price" name="price" step="0.01" placeholder="价格"></td>
                           <td><input type="text" id="press" name="press" placeholder="出版社"></td>
                           <td><input type="text" id="author" name="author" placeholder="作者"></td>
                           <td><input type="number" id="number" name="number" placeholder="数量"></td>
                           <td><button type="submit" onclick="add(this)">添加</button></td>
                    `;
                    tbody.appendChild(row2);
                }
            }
        })
    });

    <!-- 跳转首页 -->
    function btn() {
        location.assign("menu.html");
    }
</script>
</body>
</html>